<template>
  <view class="content-r">
    <image
        class="bg"
        :src="EnumBG.HR"
        mode="widthFix"
      ></image>

      <image
        class="hr-bg"
        :src="EnumBG.HRBG"
        mode="widthFix"
    ></image>

    <image
        class="bg"
        :src="EnumBG.HR"
        mode="widthFix"
      ></image>

    <view class="height-info m" :style="{ 'background-image': 'url(' + EnumBG.BU6 + ')' }"><view>男孩身高{{ms}}</view> </view>

    <view class="height-info w" :style="{ 'background-image': 'url(' + EnumBG.BU7 + ')' }"><view>女孩身高{{ws}}</view></view>

    <view class="to-r" :style="{ 'background-image': 'url(' + EnumBG.BU9 + ')' }"  @click="updateStatus">再试试</view>
  </view>
</template>

<script setup lang="ts">
import { EnumBG } from "@/utils/content";
import {EnumHeight} from "../content";
const emit = defineEmits(['update:defStatus'])
interface IProps {
    ws:number
    ms:number
}

withDefaults(defineProps<IProps>(), {})
const sizeStatus = ref(false)
const updateStatus = ()=>{
    emit('update:defStatus',EnumHeight.STATUS)
}
const startTimer = () => {
setInterval(() => {
    sizeStatus.value =  !sizeStatus.value
}, 1000); // 每秒执行一次
};
onMounted(()=>{
    startTimer();
})

</script>

<style lang="scss" scoped>
.content-r{
    width: 100%;
    height: 100%;
    letter-spacing: 2px;
    .bg{
        width: 100%;
    }
    .hr-bg{
        position: absolute;
        z-index: 98;
        top: 36%;
        width: 86%;
        left: 9%;
    }
    .h-button-def{
        position: absolute;
        z-index: 99;
        top: 71%;
        height: 170rpx;
        left: 47.5%;
    }
    .h-button{
        position: absolute;
        z-index: 99;
        top: 71%;
        width: 42%;
        left: 57.5%;
        transition: all 1s;
    }
    .h-button-samll{
        position: absolute;
        z-index: 99;
        top: 72%;
        width: 36%;
        left: 60%;
        transition: all 1s;
    }
    .height-info{
        width: 65%;
        height: 155rpx;
        position: absolute;
        z-index: 99;
        left: 15%;
        line-height: 115rpx;
        text-align: center;
        color: white;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        view{
            height: auto;
            margin-top: 40rpx;
            margin-left: 100rpx;
        }
    }
    .w{
        top: 52%;
    }
    .m{
        top: 42%;
    }
    .to-r{
        width: 305rpx;
        height: 115rpx;
        position: absolute;
        z-index: 98;
        top: 83%;
        left: 31%;
        line-height: 115rpx;
        text-align: center;
        color: white;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
}
</style>
